* {
    margin: 0;
    padding: 0;
}

/* grid */
.container {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr .5fr 1fr;
    grid-template-rows: 0.5fr 50px 1fr 1fr 1fr 1fr;
    grid-auto-columns: 1fr;
    gap: 0px 0px;
    grid-auto-flow: row;
    grid-template-areas:
        "header header header header header header"
        "header header header header header header"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu"
        "timeline timeline timeline timeline menu menu";
        overflow: hidden;
    height: 100vh;
}

.header {
    grid-area: header;
}

.menu {
    grid-area: menu;
}

.timeline {
    grid-area: timeline;
    overflow-y: auto;
    border: 5px solid aqua;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.427);
    height: 100%;
    overflow-x: hidden;
}


/* set font-type of all text */
.text {
    font-family: "Agency FB";
    color: white;
    font: 14px;
}

.text-box {
    border: 2px rgb(0, 170, 204) solid;
    background-color: rgba(130, 130, 130, 0.622);
    height: 37%;
    padding: 5px;
    overflow-y: auto;
    margin-bottom: 175px;
}

.text-box2 {
    border: 2px rgb(0, 170, 204) solid;
    background-color: rgba(130, 130, 130, 0.622);
    height: 37%;
    padding: 5px;
    box-shadow: 2px 2px rgba(0, 0, 0, 0.427);
    overflow-y: auto;   
    margin-top: 175px;
}


/* blue bar styles */
#header_1 {
    width: 100%;
    max-width: 100%;
    padding: 0;
    background-color: rgb(0, 209, 209);
    background-position: center;
    background-size: cover;
    height: 100%;
}

/* Keeps company logo size and location just right */
.header_image{
    display: flex;
    justify-content: center;
    align-self: center;
}

.textcontainer2 {
    float: right;
}

.image_container2 {
    float: left;
    max-width: 250px;
    height: auto;
}

.image_container {
    float: right;
}

.textcontainer {
    float: left;
}

h3 {
    font: 20px;
}

.flex_box {
    display: flex;
    flex-direction: row;
    width: 100%;
    justify-content: center;
}

.color{
    background-color: aqua;
    width: 5%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

body{
    overflow: hidden;
}

.year{
    font-size: 24px;
    color: white;
}

.flex_right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
}

.flex_left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
}




@media screen and (max-width: 420px){

    .textcontainer2 {
        float: left;
    }
    
    .image_container2 {
        float: left;
        max-width: 250px;
        height: auto;
    }
    
    .image_container {
        float: left;
    }
    
    .textcontainer {
        float: left;
    }


.flex_box{
    flex-direction: column;
}
    
.flex_right{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}

.flex_left{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
}
    
    .color{
        background-color: aqua;
        width: 5%;
        display: flex;
        flex-direction: column;
        justify-content: left;
        opacity: 0;
    }
    
    body{
        overflow: hidden;
    }
    
    .year{
        font-size: 12px;
        color: white;
    }
    #header_1 {
        width: 100%;
        max-width: 100%;
        padding: 0;
        background-color: rgb(0, 209, 209);
        background-position: center;
        background-size: cover;
        height: 100%;
    }
    
    /* Keeps company logo size and location just right */
    #header_1 img {
        margin-left: auto;
        margin-right: auto;
    }

    .text-box {
        border: 2px rgb(0, 170, 204) solid;
        background-color: rgba(130, 130, 130, 0.622);
        height: 37%;
        padding: 5px;
        justify-content: right;
        overflow-y: auto;
        margin-bottom: 0;
        margin-top: 10px;
    }
    
    .text-box2 {
        border: 2px rgb(0, 170, 204) solid;
        background-color: rgba(130, 130, 130, 0.622);
        height: 37%;
        padding: 5px;
        box-shadow: 2px 2px rgba(0, 0, 0, 0.427);
        overflow-y: auto;
        justify-content: left;    
        margin-top: 10px;
    }

    .container {
        display: grid;
        grid-template-columns: 1fr 1fr 1fr 1fr .5fr 1fr;
        grid-template-rows: 0.5fr 50px 1fr 1fr 1fr 1fr;
        grid-auto-columns: 1fr;
        gap: 0px 0px;
        grid-auto-flow: row;
        grid-template-areas:
            "header header header header header header"
            "menu menu menu menu menu menu"
            "timeline timeline timeline timeline timeline timeline"
            "timeline timeline timeline timeline timeline timeline"
            "timeline timeline timeline timeline timeline timeline"
            "timeline timeline timeline timeline timeline timeline";
            overflow: hidden;
        height: 100vh;
    }

    .header_image img{
        max-width: 454px;
        height: auto;
    }
}